<template>
	<!-- 邀请好友 -->
	<view class="modal-invite-warp">
		<!-- 头部 -->
		<view class="header_bar header_fixed">
			<view class="header">
				<view class="header-goWhiteBack" @click="$tools.back(1)"></view>
				<view class="header-title--white">邀请好友</view>
			</view> 
		</view> 
		<view class="content">
			<view class="info">
			<view class="txt">帮帮乐邀请码</view>
			<view class="code">
				{{ userInfo.userCode }}
			</view>
			<view class="copy" @tap.stop="$tools.copy(userInfo.userCode)">
					复制
			</view>
			<view class="p">邀请好友，精彩加倍！</view>
		</view>
		<view class="bottom"> 
			<view class="qrcode">
				<image v-if="shareImg != ''" :src="shareImg" mode="" class="image"/>
			</view>
			<view class="btn" @tap.stop="$tools.copy(shareUrl)">复制邀请链接</view>
		</view>
	</view>
	</view>

</template>

<script>
import QR from '../../components/qrcode/qrcode';
import url from '@/common/js/url.js';
export default {
	data () {
			return {
		shareUrl: '',
		shareImg: '',
		userInfo: {},
			};
	},
mounted(){
	this.init();
},
onLoad() {
	this.init();
},
onShow() {
	this.init();
},
	methods: {
	init(){
		console.log(22)
		this.getUserInfo();
	},
	// 查询用户实时最新信息
	getUserInfo(){
			var data = null;
			this.$Ajax('/api/user/getUserInfo',
			data,
			res => {
				if (res.code == 200) {
					this.userInfo = res.data;
					console.log("this.userInfo:",this.userInfo);
					this.getValue()
				}
			}
		)
	},
	getValue() {
		this.shareUrl = url.url +'?invite='+ this.userInfo.userCode;
		console.log(this.userInfo,this.shareUrl);
		this.shareImg = this.creatQrcode(this.shareUrl);
		return
	},
	creatQrcode(url) {
		if (url == '') {
			return false;
		}
		let img = QR.createQrCodeImg(url);
		return img;
	},
			cancel(){
					this.$emit('closeInvitePopup',false)
			}
	},
};
</script>

<style lang="scss" scoped>
// 邀请好友弹窗
.modal-invite-warp{
	overflow: hidden;
	width: 100%;
	height: 100vh;
	background: url('@/static/user/invite-bg.png') no-repeat;
	background-size: 100% 100%;
	background-color:#FA6A45;
	.content{
		width: 100%;
		background: url('@/static/user/invite-info.png') no-repeat;
	  background-size: 100% 100%;
		width: 702rpx;
		height: 888rpx;
		margin: auto;
		margin-top: 300rpx;
		text-align: center;
		padding-top: 0 !important;
		overflow: hidden;
		position: relative;
		.qrcode{
			width: 240rpx;
				height: 240rpx;
				margin: auto;
				border: 1px solid #fff;
				border-radius: 10rpx;
				padding: 12rpx;
				.image{
					width: 100%;
					height: 100%;
				}
			}
		.info{
			width: 68.5%;
			margin: auto;
			margin-top: 40rpx;
			padding: 10rpx 40rpx;
		}
		.txt{
			color: #EE3A33;
			font-weight: 800;
			font-size: 32rpx;
		}
		.code{
			font-weight: bold;
			font-size: 91rpx;
			color: #EE3A33;
			line-height: 106rpx;
			margin-top: 26rpx;
		}
		.copy{
			font-size: 35rpx;
			color: #fff;
			width: 168rpx;
			text-align: center;
			height: 68rpx;
			line-height: 68rpx;
			background: #EE3A33;
			border-radius: 38rpx;
			margin: auto;
			margin-top: 26rpx;
		}
		.p{
			font-weight: 400;
			font-size: 27rpx;
			color: #A99550;
			width: 350rpx;
			text-align: center;
			height: 52rpx;
			line-height: 52rpx;
			background: #FFF7E7;
			border-radius: 8rpx;
			margin: auto;
			margin-top: 26rpx;
		}
		
	}
	.bottom{
		width: 100%;
		position: absolute;
		bottom: 64rpx;
		left: 0;
	}
	.btn{
		width: 526rpx;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		background: #EE3A33;
		border-radius: 80rpx;
		margin: auto;
		margin-top: 32rpx;
		text-align: center;
		font-size: 34rpx;
		color: #FFFFFF;
	}
}
</style>
